<template>
  <div class="top-right-cmp">
    <div class="chart-name">设备故障月趋势
      <dv-decoration-3 style="width:200px;height:20px;"></dv-decoration-3>
    </div>
    <dv-charts :option="option" />
    <LabelTag :config="labelConfig" />
  </div>
</template>
<script>
import LabelTag from './LabelTag'
export default {
  name:'TopRightCmp',
  components: {
    LabelTag
  },
  data() {
    return {
      labelConfig: {
        data: ['收费站', '监控中心', '道路外场', '其他1232']
      },
      option:{
        legend:{
          data:[
            {name:'收费系统',color:'#00baff'},
            {name:'监控系统',color:'#ff5ca9'},
            {name:'通信系统',color:'#f5d94e'},
            {
              name: '供配电系统',
              color: '#f5d94e'
            }
          ],
          textStyle:{
            fill:'#fff'
          }
        },
        xAxis:{
          data:['10/01','10/02','10/03','10/04','10/05','10/06','10/07'],
          axisLine:{//坐标轴 轴线相关设置。
            style:{
              stroke:'#999' //Stroke属性定义一条线，文本或元素轮廓颜色(可以理解为border)
            }
          },
          axisLabel:{//坐标轴 刻度标签的相关设置。
            style:{
              fill:'#999' //形状轮廓内的填充
            }
          },
          axisTick:{//坐标轴 刻度相关设置。
            show:false
          }
        },
        yAxis:{
          data:'value',
          splitLine:{//坐标轴在 grid 区域中的分隔线。
            show:false
          },
          axisLine:{
            style:{
              stroke:'#999'
            }
          },
          axisLabel:{
            style:{
              fill:'#999'
            }
          },
          axisTick:{//坐标轴 刻度相关设置。
            show:false
          },
          min:0,
          max:8,
        },
        series:[
          {
            name:'收费系统',
            data:[2.5,3.5,6.5,6.5,7.5,2.5],
            type:'bar',
            barStyle:{
              fill:'rgba(0,186,255,0.4)',
              stroke:'rgba(0,186,255,0.4)'
            }
          },
          {
            name:'监控系统',
            data:[2.5,3.5,6.5,6.5,7.5,6.5,2.5],
            type:'line',
            lineStyle:{
              stroke:'#ff5ca9'
            },
            linePoint:{
              radius:4,
              style:{
                fill:'#ff5ca9',
                stroke:'transparent'
              }
            }
          },
          {
            name:'通信系统',
            data:[1.3,2.3,5.3,5.3,6.3,5.3,1.3],
            type:'line',
            smooth:true,//是否平滑曲线显示
            lineArea:{//折线区域配置
              show:true, //是否显示折线区域
              gradient:['rgba(55,162,218,0.6)','rgba(55,162,218,0)'] //折线区域渐变色
            },
            lineStyle:{//折线默认样式
              lineDash:[5,5]
            },
            linePoint:{//折线点配置
              radius: 4,
              style:{
                fill:'#00db95'
              }
            }

          },
          {
            name:'供配电系统',
            data:[0.2,1.2,4.2,5.2,4.2,0.2],
            type:'line',
            lineArea:{
              show:true,
              gradient:['rgba(245,217,78,.8)','rgba(245,217,79,.2)']
            },
            lineStyle:{
              stroke:'#f5d94e'
            },
            linePoint:{
              radius:4,
              style:{
                fill:'#f5d94e',
                stroke:'#f00'
              }
            }
          }
        ]

      }
    }
  },
}
</script>
<style lang="less">
.top-right-cmp{
  position: relative;
  padding: 0 50px;
  box-sizing: border-box;

  .chart-name{
    position: absolute;
    right: 70px;
    top: 10px;
    text-align: right;
    font-size: 20px;
  }
}
</style>